<template>
	<view>
		<view class="fanku_con">
			<view class="title"><strong>温馨提醒:</strong><br>上传图片总大小不能超过3m，单个文件大小不能超过1m，图片总个数不能超过3张</view>
			<view class="img_z">
				<view class="imgadf center"  v-if="!disabled" @click="ongetimg()">
					<image style="width: 58rpx;height: 58rpx;" src="./tupianadd.png" mode=""></image>
					<text style="margin-top: 5rpx;">上传图片</text>
				</view>
				<view style="position: relative;" v-for="(item,index) in img_list" :key="index">
					<image v-if="disabled"  style="width: 120rpx;height: 120rpx;margin-left: 20rpx;margin-bottom: 20rpx;background-color:rgba(0,0,0,0.1);border-radius: 10rpx;"
					 :src="item"></image>
					 <image v-if="!disabled"  style="width: 120rpx;height: 120rpx;margin-left: 20rpx;margin-bottom: 20rpx;background-color:rgba(0,0,0,0.1);border-radius: 10rpx;"
					  :src="item"></image>
					<image class="shancs" src="./shanchus2.png" mode="" v-if="!disabled" @click="selec(index)"></image>
				</view>
			</view>
		</view>

	</view>
</template>

<script>
	export default {
		data() {
			return {
				// img_list: this.img_lists
			}
		},
		props: {
			// 最多上数量 1-9
			count: {
				type: Number,
				default: false
			},
			//图片上传地址
			url: {
				type: String,
				default: ''
			},
			//文件对应的 key 
			name: {
				type: String,
				default: ''
			},
			//请求头
			header: {
				type: Object,
				default: {}
			},
			img_list:{
				type: Array,
				default: []
			},
			disabled:{
				type:Boolean,
				default:false
			}
		},
		computed: {},
		methods: {
			ongetimg() { //上传图片方法
				var that = this
				if (!that.url) {
					return uni.showToast({
						title: '请填写上传地址',
						icon: 'none',
						position: 'bottom'
					});
				}
				// 更改图片上传流程
				// 本地先选取图片 暂不上传 
				//  当用户点击提交的时候进行图片上传(判断图片上传数量)及保存数据
				// 上传要求  一次上传最多三张图片  每张图片大小不得超过1m
				uni.chooseImage({ //选中本地图片
					// 一次上传最多选择的图片数量
					// h5 端 限制数量无效 需要手动进行判断
					count: 3,
					sizeType: ['original', 'compressed'], //可以指定是原图还是压缩图，默认二者都有
					sourceType: ['album'], //从相册选择
					success: res => {
						// uni.showLoading({ //加载框
						// 	title: '加载中...'
						// })
						// 判断选择本地图片数量及尺寸
						const tempFilePaths = res.tempFiles;
						var val = tempFilePaths.find(ele =>ele.size > 1024*1024);
						if(tempFilePaths.length > 3){
							uni.showToast({
								title:"一次选择最多不能超过3张",
								icon:"none"
							})
							return
						}
						if(val){
							uni.showToast({
								title:"单个图片大小不能超过1m"
							})
							return
						}
						if(tempFilePaths.length + this.img_list.length > 3){
							uni.showToast({
								title:"图片总个数不能超过3张",
								icon:"none"
							})
							return
						}
						that.$emit('obtain_img', res.tempFilePaths)
						// const tempFilePaths = res.tempFiles;
						// that.img_list.push(...tempFilePaths); //plus数组
						// that.$emit('obtain_img', that.img_list)
						
						/**
							res.tempFilePaths.forEach((item, index) => { //本地选中的图片组
								
								uni.uploadFile({ //上传图片
									url: that.url, //上传接口地址
									filePath: item, //一张图
									name: that.name,
									header: that.header,
									success: res => {
										if (that.img_list.length >= that.count) //限制
											return uni.showToast({
												title: '最多上传' + that.count + '张图片',
												icon: 'none',
												position: 'bottom'
											});
											
										that.img_list.push(JSON.parse(res.data).data.fileUrl); //plus数组
										that.$emit('obtain_img', that.img_list)
									}
								});
								uni.hideLoading() //关闭加载框
							});
						**/
					}
				});
			},
			//删除
			selec(index) {
				this.img_list.splice(index, 1)
				this.$emit('del', this.img_list)
			},
			//预览
			preview(index, urls) {
				uni.previewImage({
					urls: urls,
					current: index,
					longPressActions: {
						itemList: ['发送给朋友', '保存图片', '收藏'],
						success: function(data) {
							//consolelelelele.log('选中了第' + (data.tapIndex + 1) + '个按钮,第' + (data.index + 1) + '张图片');
						},
						fail: function(err) {
							//consolelelelele.log(err.errMsg);
						}
					}
				});
			}
		}
	}
</script>

<style scoped>
	/* page {
		background-color: #181E38;
		padding-top: 66rpx;
		box-sizing: border-box;
	} */

	.fanku_con {
		/* width: 690rpx; */
		background: #fff;
		border-radius: 10rpx;
		/* margin-left: 30rpx; */
		padding-top: 20rpx;
		padding-bottom: 70rpx;
		box-sizing: border-box;
	}

	.imgadf {
		width: 120rpx;
		height: 120rpx;
		background-color: rgba(255, 255, 255, 0.5);
		/* margin-left: 29rpx; */
		margin-left: 20rpx;
		border-radius: 10rpx;
		margin-bottom: 20rpx;
		font-size: 20rpx;
		color: #666666;
		flex-direction: column;
	}
	.title{
		font-size: 12px;
		    padding: 15px;
	}
	.img_z {
		display: flex;
		flex-wrap: wrap;
		padding-right: 10rpx;
		box-sizing: border-box;
	}

	.shancs {
		width: 35rpx;
		height: 35rpx;
		position: absolute;
		top: -10rpx;
		right: -10rpx;
		background-color: #FFFFFF;
		border-radius: 100%;
	}

	.dianhua_on {
		width: 364rpx;
		height: 74rpx;
		background: linear-gradient(to right, #F55C63, #F78361);
		border-radius: 38rpx;
		font-size: 28rpx;
		color: #FFFFFF;
		margin-top: 130rpx;
		margin-left: 192rpx;
	}

	.center {
		display: flex;
		justify-content: center;
		align-items: center;
	}
</style>
